<script setup>
import HeaderTitle from './newChild/HeaderTitle.vue'
import VipList from './newChild/VipList.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const popupShow = ref(false)

onLoad(() => {
  const currentDate = new Date();
  const endDate = new Date('2025-03-16');

  if (currentDate <= endDate) {
    popupShow.value = true;
  }
})
</script>

<template>
  <NavBar>会员页</NavBar>
  <HeaderTitle></HeaderTitle>
  <div class="vip-box">
    <VipList></VipList>
  </div>
  <div class="xinPopup">
    <van-popup v-model:show="popupShow" close-on-click-overlay @close="popupShow = false">
      <img src="https://channel1.topyunliu.com/upload/2025/01/14/file_20250114120100A001.png" mode="widthFix"
        class="popupImg" alt="">
      <div class="clear_box" @click="popupShow = false">
        <i class="iconfont ai-icon-close"></i>
      </div>
    </van-popup>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang="less" scoped>
.vip-box {
  box-sizing: border-box;
  background-color: var(--a-main-box-bg-color);
  height: calc(100vh - 300rpx);
  border-radius: 36rpx 36rpx 0 0;
  padding: 24rpx 15rpx 0;
}

.xinPopup {
  .popupImg {
    width: 600rpx;
    border-radius: 16rpx;
  }

  .clear_box {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      font-size: 30rpx;
      color: #FFF;
    }
  }

}

.xinPopup ::v-deep .van-popup {
  background-color: transparent !important;
}

::v-deep {

  .van-tabs {
    background-color: transparent !important;

    .van-tab {
      background-color: transparent !important;
      color: var(--a-two-text-color);
      font-size: 34rpx;
    }

    .van-tabs__scroll {
      background-color: transparent;
    }

    .van-tab--active {
      color: #FFECC1 !important;
    }

    .van-tabs__line {
      width: 50rpx !important;
      background: linear-gradient(90deg, #FFECC1 0%, #F8BC75 100%);
    }

    .van-tab__pane--active {
      height: auto;
      overflow: hidden;
    }
  }

  .van-checkbox__label {
    color: #FFCF86;
  }

  .van-checkbox__icon {
    font-size: 32rpx !important;
  }

  .van-checkbox__icon--checked {
    background-color: #FFCF86;
    border: none;
  }

  .van-count-down {
    font-size: 25rpx;
    color: #666666;
  }

  .van-cell {
    .van-checkbox {
      transform: translate(0, 15rpx) !important;
    }
  }
}
</style>